<template>
  <div class="carousel">
    <!-- 饿了么轮播图 -->
    <el-carousel trigger="click" autoplay>
      <el-carousel-item v-for="item in carList" :key="item.id">
        <!-- 使用 加载 loading组件 -->
        <div class="loadingBox" v-if="flag">
          <Loading></Loading>
        </div>
        <img :src="item.cover" alt="" />
        <h3>{{ item.title }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  //  引入 加载组件
  import Loading from '@/components/loading/loading01.vue';
  import { postCarousel } from '../../api/carousel.js';
  export default {
    name: 'carrousel',
    components: {
      Loading,
    },
    data() {
      return {
        carList: [], // 存储轮播图数据
        flag: true,
      };
    },
    methods: {
      async getCarousel() {
        const { data: res } = await postCarousel();
        if (res == '') {
          this.flag = false;
        }
        this.carList = res.data;

        // console.log(res.data);
      },
    },
    created() {
      this.getCarousel();
    },
  };
</script>
<style lang="less" scoped>
  @import url('../../state/css/carousel/carousel.css');
  //  设置 加载中样式
  .carousel {
    position: relative !important;
    .loadingBox {
      position: absolute !important;
      width: 100%;
      top: 50%;
      // z-index: 999;
      transform: translateY(-50%);
    }
  }
</style>
